{extend name="common/index"}
{block name="body"}
<script>
    var gameNameTemp = 'index';
    var inType = {$cp_id};
</script>
<script src="__TEMPLATE__/sysme/js/getTime.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="__SYSMET__/lib/Hui-iconfont/1.0.8/iconfont.css" />
<style type="text/css">
    .kj_span span{
        display: inline-block;
        width: 25px;
        height: 25px;
        background-color: #d91d36;
        border-radius: 50%;
        color: white;
        text-align: center;
        line-height: 25px;
    }
     .kj_span .num01 {
	background:  rgb(229, 229, 0);
}
	 .kj_span .num02 {
background-color: rgb(42, 100, 174);
}

 .kj_span .num03 {
	background-color: rgb(148, 150, 149);
}

 .kj_span  .num04 {
	background: rgb(242, 149, 53);
}

  .kj_span .num05 {
	background:rgb(125, 203, 223);
}

 .kj_span .num06 {
	background:  rgb(44, 72, 156);;
}

 .kj_span .num07 {
	background: rgb(203, 203, 203);
}

 .kj_span .num08 {
	background: rgb(232, 51, 56);
}

 .kj_span .num09 {
	background-color: rgb(66, 30, 32);
}

  .kj_span .num10 {
	background: rgb(79, 178, 51);
}
 .kj_span .num_tu1{background:url(__TEMPLATE__/mobile/index/img/1.png) no-repeat;background-size:23px;color:transparent;}
 .kj_span .num_tu2{background:url(__TEMPLATE__/mobile/index/img/2.png) no-repeat;background-size:23px;color:transparent;}
 .kj_span .num_tu3{background:url(__TEMPLATE__/mobile/index/img/3.png) no-repeat;background-size:23px;color:transparent;}
 .kj_span .num_tu4{background:url(__TEMPLATE__/mobile/index/img/4.png) no-repeat;background-size:23px;color:transparent;}
 .kj_span .num_tu5{background:url(__TEMPLATE__/mobile/index/img/5.png) no-repeat ;background-size:23px;color:transparent;}
 .kj_span .num_tu6{background:url(__TEMPLATE__/mobile/index/img/6.png) no-repeat;background-size:23px;color:transparent;}
</style>
<div>
    {volist name="caipai_list" id="item"}
    <a href="{:url('Lottery/newDetail')}?kjjg_id={$item.id}">
        <!--<div style="width: 100%;height: 100px;background-color: white;margin-top: 10px;padding-top: 10px; border-bottom:1px solid #ccc ;">
            <img src="__TEMPLATE__/sysme/images/{$item.id}.png" width="40" height="40" style="margin-left: 12px;"/>
            <p style="margin-left: 60px;margin-top: -40px;font-size: 0.975rem;color: #818181;">
                <span>{$item.cp_name}</span>
                <span style="float: right;margin-right: 10px;font-size: 0.875rem;color: #999;" id="time_{$item.id}">{$item.jztime|date='Y-m-d H:i',###}</span>
            </p>
            <p style="margin-left: 60px;font-size: 0.875rem;color: #999;margin-top:3px;">
                <span id="qihao_{$item.id}">第{$item.qihao}期</span>
                <span style="float: right;margin-right: 10px;"> > </span>
            </p>
            <p class="kj_span" style="margin-left: 58px; margin-top: 8px;" id="code_{$item.id}">
                {volist name="item.kjjg" id="it"}
                <span>{$it}</span>
                {if condition="$item.id eq 9"}
                {if(count($item.kjjg)==($key+2))}
                +
                {/if}
                {/if}
                {/volist}
            </p>
        </div>-->
	<div style="width: 100%;height: 100px;background-color: white;border-bottom:1px solid #ccc ;overflow: hidden;">
	<img id="img_{$item.id}" src="__TEMPLATE__/sysme/images/{$item.id}.png" width="55"  style="margin-left: 4px;float:left;margin-right:8px;margin-top:22.5px;"/>
	<div style="float:left;width:76%;margin-top:12px;">

		<span>{$item.cp_name}</span>
		<p class="kj_span" style="margin:8px 0;width:100%;" id="code_{$item.id}">
		{if($item.id==36 || $item.id==44 || $item.id==72)}
		{volist name="item.kjjg" id="it"}
			<span style="display:inline-block;border-radius: 0%;"  class="num_tu{$it}" >{$it}</span>
		{/volist}
		{elseif($item.id==4 || $item.id==61 || $item.id==63) /}
		{volist name="item.kjjg" id="it"}
			<span style="display:inline-block;border-radius:0%;width:8%;" class="num{$it} pk10" >{$it}</span>
		{/volist}
		{else/}
		   {volist name="item.kjjg" id="it"}
			<span style="display:inline-block;">{$it}</span>
			{if condition="$item.id eq 9"}
				{if(count($item.kjjg)==($key+2))}
				+
				{/if}
			{/if}
		{/volist}
		{/if}
		
		</p>
		<div style="float:left;font-size:12px;color: #999;width:100%;">
			<span id="qihao_{$item.id}" style="float:left;">第{$item.qihao}期</span>
			<span style="float: right;margin-right: 10px;margin-top:1px;" id="time_{$item.id}">{$item.jztime|date='Y-m-d H:i',###}</span>
		</div>
		
	</div>
	<div style="float:right;height:100px;line-height:100px;margin-right:2px;" class="Hui-iconfont">&#xe6d7;</div>
</div>
    </a>
    {/volist}
</div>

<script>
//	$('.pk10').css('height',$('.pk10').css('width'))
//	$('.pk10').css('lineHeight',$('.pk10').css('height'))
	
</script>

<script>
	var ids = '{$cp_id}';
	setInterval(function(){
		$.ajax({
			type: "post",
			url: "/index/Processing/asyncDataDouble",
			data: {"ids":ids},
			success: function (data) {
				for(var i=0;i<data.length;i++){
					var detail = data[i];
					var id = parseInt(detail.id);
					var name = detail.cp_name;
					var kjjg = detail.kjjg;
					var qihao = detail.qihao;
					var time = detail.jztime;
					$('#img_'+id).attr('src','__TEMPLATE__/sysme/images/'+id+'.png');
					$('#name_'+id).html(name);
					$('#qihao_'+id).html("第"+qihao+"期");
					$('#time_'+id).html(time);
					var html = '';
					for(var j= 0;j<kjjg.length;j++){
						var code = kjjg[j];
						if( 36==id || 44==id || 72==id ){
							html += '<span style="display:inline-block;border-radius: 0%;margin-right:5px;"  class="num_tu'+code+'" >'+code+'</span>';
						}else if( 4==id || 61==id || 63==id ){
							html += '<span style="display:inline-block;border-radius: 0%;width:9%;margin-right:1%;" class="num'+code+'" >'+code+'</span>';
						}else {
							html += '<span style="display:inline-block;margin-right:5px;">'+code+'</span>';
							if( 9==id && kjjg.length==j+2 ){
								html += '+';
							}
						}
					}
					$('#code_'+id).html(html);
				}
			}
		});
	},20000);
</script>

{/block}
